<template>
  <div>
    <div>
      <data-panel :data="panel"></data-panel>
    </div>
    <div>
      <data-statistic :data="statistic"></data-statistic>
    </div>

    <data-row :col="2">
      <template #default="{ span }">
        <el-col v-bind="span">
          <div class="app-margin-bottom-interval app-card-bg">
            <data-echarts :data="LineChart"></data-echarts>
          </div>
        </el-col>
        <el-col v-bind="span">
          <div class="app-margin-bottom-interval app-card-bg">
            <data-echarts :data="PieChart"></data-echarts>
          </div>
        </el-col>
        <el-col v-bind="span">
          <div class="app-margin-bottom-interval app-card-bg">
            <data-echarts :data="Polyline"></data-echarts>
          </div>
        </el-col>
        <el-col v-bind="span">
          <div class="app-margin-bottom-interval app-card-bg">
            <data-echarts :data="FunnelChart"></data-echarts>
          </div>
        </el-col>
        <el-col :span="24">
          <div class="app-margin-bottom-interval app-card-bg">
            <data-echarts :data="BarChart"></data-echarts>
          </div>
        </el-col>
      </template>
    </data-row>
  </div>
</template>
<script setup lang="ts">
import {DataStatisticItem} from "@/components/DataStatistic.vue";
import {FunnelChartType, LineChartType, PieChartType, PolylineType} from "@/components/DataEcharts/EchartsType";
import {Ref, ref, UnwrapRef} from "vue"

const panel = [
  {icon: "ie", color: "#ff0000", name: "商品", info: "卖出4件"},
  {icon: "debug", color: "#409EFF", name: "访客", info: "今日10人访问"},
  {icon: "theme", color: "#67C23A", name: "销售额", info: "1505元"},
  {icon: "user", color: "#E6A23C", name: "新用户", info: "50人"},
]

const statistic: Array<DataStatisticItem> = [
  {title: "订单金额", value: 268500.23, precision: 2, suffix: "元"},
  {title: "订单金额", value: 268500.23, precision: 2, suffix: "元"},
  {title: "订单金额", value: 268500.23, precision: 2, suffix: "元"},
  {title: "订单金额", value: 268500.23, precision: 2, suffix: "元"},
]

/**
 * 折线图
 */
const LineChart: Ref<UnwrapRef<LineChartType>> = ref({
  type: "line-chart",
  title: "折线图",
  labels: ["周一", "周二", "周三", "周四", "周五", "周六", "周日", "周一", "周二", "周三", "周四", "周五", "周六", "周日"],
  values: [150, 245, 185, 259, 120, 50, 300, 99, 197, 365, 25, 145, 145, 248]
})

/**
 * 柱状图
 */
const BarChart: LineChartType = {
  type: "line-chart",
  title: "柱状图",
  view: "bar",
  solid: true,
  labels: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30"],
  values: [150, 890, 550, 770, 898, 120, 50, 300, 189, 45, 28, 147, 698, 150, 54, 150, 890, 550, 770, 898, 120, 50, 300, 189, 45, 28, 147, 698, 150, 54]
}

/**
 * 饼图
 */
const PieChart: PieChartType = {
  type: "pie-chart",
  title: "饼图",
  values: [
    {value: 30, name: "初一"},
    {value: 230, name: "初二"},
    {value: 156, name: "初三"},
    {value: 400, name: "高一"},
    {value: 540, name: "高二"},
    {value: 600, name: "高三"}
  ]
}

/**
 * 多折线图
 */
const Polyline: PolylineType = {
  type: 'polyline-category',
  title: '多项折线图',
  legend: ['Symbian', 'Android', 'Ios', 'Wp8', 'HarmonyOS'],
  labels: ['2009', '2010', '2011', '2012', '2013', '2014'],
  values: [
    [98, 30, 151, 34, 41, 25],
    [12, 185, 67, 65, 188, 87],
    [86, 30, 86, 125, 76, 47],
    [45, 57, 98, 27, 78, 50],
    [65, 245, 98, 112, 188, 123]
  ]
}


/**
 * 漏斗图
 */
const FunnelChart: FunnelChartType = {
  type: 'funnel-chart',
  title: '漏斗图',
  values: [
    {value: 30, name: '初一一班'},
    {value: 50, name: '初一二班'},
    {value: 45, name: '初一三班'},
    {value: 33, name: '初一四班'},
    {value: 25, name: '初一五班'},
    {value: 34, name: '初一六班'},
    {value: 29, name: '初一七班'},
  ]
}

</script>